import { defineComponent, h, onMounted, onUnmounted } from '@vue/runtime-core'
import startImg from '../assets/images/start_page.jpg'
import startBtn from '../assets/images/startBtn.png'
import { getScreenSize } from '../utils'

const { width, height } = getScreenSize()
const x = width / 2 - 80
const y = height - 200
export default defineComponent({
  setup(props, ctx) {
    const onClick = () => {
      ctx.emit('changePage', 'GamePage')
    }
    const handleEnter = (e) => {
      if(e.code === 'Space') {
        ctx.emit('changePage', 'GamePage')
      }
    }
    onMounted(() => {
      document.addEventListener('keydown', handleEnter)
    })

    onUnmounted(() => {
      document.removeEventListener('keydown', handleEnter)
    })
    return {
      onClick
    }
  },
  render(ctx) {
    return h('Container', [
      h('Sprite', { texture: startImg }),
      h('Sprite', { 
        texture: startBtn, 
        x, 
        y,
        interactive: true,
        pointerdown: ctx.onClick
      })
    ])
  }
})